<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-table
      size="small"
      bordered
      rowKey="id"
      :columns="columns"
      :pagination="false"
      :dataSource="data">

      <template slot="operation" slot-scope="text, record">
        <a @click="handleSelect(record)">{{$t('m.bpm.design.variable_select')}}</a>
      </template>
    </a-table>

    <template slot="footer">
      <a-button key="close" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

import { getAction } from '@/api/manage'
import YchConstant from '@/api/YchConstant'

export default {
  name: 'SelectVariableDialog',
  data() {
    return {
      title: this.$t('m.bpm.other.process_dialog'),
      visible: false,
      data: [],
      variables: [],
      formVariables: [],
      formCode: null,
      columns: [{
        title:this.$t('m.common.label.number'),
        dataIndex: '',
        key: 'rowIndex',
        width: 50,
        align: 'center',
        customRender: function(t, r, index) {
          return parseInt(index) + 1
        }
      }, {
        title: this.$t('m.bpm.design.variable'),
        align: 'center',
        width: 180,
        dataIndex: 'key'
      }, {
        title: this.$t('m.bpm.entity.varName'),
        align: 'center',
        width: 180,
        dataIndex: 'alias'
      }, {
        title: this.$t('m.bpm.design.variable_source'),
        align: 'center',
        width: 100,
        dataIndex: 'type',
        customRender: (text) => {
          if (text == '1') {
            return this.$t('m.bpm.design.variable_source_eform')
          } else {
            return this.$t('m.bpm.design.variable_srouce_custom')
          }
        }
      }, {
        title: this.$t('m.common.label.operate'),
        dataIndex: 'action',
        scopedSlots: { customRender: 'operation' },
        align: 'center',
        width: 120
      }],
      url: {
        getBpmFormVariableList: YchConstant.PREFIX_BPM + '/bpm-back/processDefRest/getBpmFormVariableList/v1'
      }
    }
  },
  methods: {
    open(variables, formCode) {
      this.variables = variables ? JSON.parse(variables) : []
      this.data = [...this.formVariables, ...this.variables]

      this.formCode = formCode

      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleSelect(record) {
      if (record.key) {
        this.$emit('selectFinished', record.key, record.alias)
        this.handleCancel()
      }
    }
  },
  watch: {
    formCode: {
      handler(val) {
        if (val) {
          getAction(this.url.getBpmFormVariableList, { formCode: val }).then((res) => {
            if (res.success) {
              this.formVariables = res.result
              this.data = [...this.formVariables, ...this.variables]
            } else {
              this.messageUtil.warning(res.message)
            }
          }).finally(() => {
          })
        } else {
          this.formVariables = []
          this.data = [...this.formVariables, ...this.variables]
        }
      },
      immediate: true
    }
  }
}
</script>
